<template>
    <div>
      <my-header title="新朋友">
        <img @click="$router.back()" src="../../assets/img/message/back_left.png" slot="imgLeft"/>
        <!--<img @click="$router.push('/AddFriend')" src="../../assets/img/contacts/add.png" slot="imgRight"/>-->
      </my-header>
      <div style="font-size: 15px;margin: 10px 15px;color: #828282">发给你的申请</div>
      <div style="height: 38vh;background: white;overflow: scroll">
        <div v-if="JSON.stringify(newFriendData)!='{}'">
          <div v-for="(item,index) in newFriendData.list2" style="display: flex;align-items:center;border-bottom:0.1px solid #f2f2f2;background: white;height: 50px;padding: 5px;box-sizing: border-box;">
            <div style="height: 36px;width: 36px">
              <img style="height: 100%;width: 100%;border-radius: 50%" src="../../assets/img/message/qun.png"/>
            </div>
            <div style="flex: 1;margin-left: 5px">
              <div style="height: 24px;font-size: 20px">
                {{item.userInfo.nickname}}
                (<span style="color: #4accfb">{{item.userInfo.email}}</span>)
              </div>
              <div style="height: 12px;font-size: 10px;color: #b6b6b6">
              </div>
            </div>
            <div @click="agreeAddFriend(item)" style="background:#f2f2f2;height: 30px;line-height:30px;border-radius: 50px;padding: 2px 15px;font-size: 13px;color: #333333;margin-right: 5px;">
              待验证
            </div>
          </div>
          <div v-for="(item,index) in newFriendData.list4" style="display: flex;align-items:center;border-bottom:0.1px solid #f2f2f2;background: white;height: 50px;padding: 5px;box-sizing: border-box;">
            <div style="height: 36px;width: 36px">
              <img style="height: 100%;width: 100%;border-radius: 50%" src="../../assets/img/message/qun.png"/>
            </div>
            <div style="flex: 1;margin-left: 5px">
              <div style="height: 24px;font-size: 20px">
                {{item.userInfo.nickname}}
                (<span style="color: #4accfb">{{item.userInfo.email}}</span>)
              </div>
              <div style="height: 12px;font-size: 10px;color: #b6b6b6">
              </div>
            </div>
            <div @click="showReason(item)" style="background:#f2f2f2;height: 30px;line-height:30px;border-radius: 50px;padding: 2px 15px;font-size: 13px;color: #333333;margin-right: 5px;">
              已拒绝
            </div>
          </div>
        </div>
      </div>
      <div style="font-size: 15px;margin: 10px 15px;color: #828282">你发送的申请</div>
      <div style="height: 38vh;background: white;overflow: scroll">
        <div v-if="JSON.stringify(newFriendData)!='{}'">
          <div v-for="(item,index) in newFriendData.list1" style="display: flex;align-items:center;border-bottom:0.1px solid #f2f2f2;background: white;height: 50px;padding: 5px;box-sizing: border-box;">
            <div style="height: 36px;width: 36px">
              <img style="height: 100%;width: 100%;border-radius: 50%" src="../../assets/img/message/qun.png"/>
            </div>
            <div style="flex: 1;margin-left: 5px">
              <div style="height: 24px;font-size: 20px">
                {{item.userFriendInfo.nickname}}
                (<span style="color: #4accfb">{{item.userFriendInfo.email}}</span>)
              </div>
              <div style="height: 12px;font-size: 10px;color: #b6b6b6">
              </div>
            </div>
            <div style="background:#f2f2f2;height: 30px;line-height:30px;border-radius: 50px;padding: 2px 15px;font-size: 13px;color: #333333;margin-right: 5px;">
              待对方验证
            </div>
          </div>
          <div v-for="(item,index) in newFriendData.list5" style="display: flex;align-items:center;border-bottom:0.1px solid #f2f2f2;background: white;height: 50px;padding: 5px;box-sizing: border-box;">
            <div style="height: 36px;width: 36px">
              <img style="height: 100%;width: 100%;border-radius: 50%" src="../../assets/img/message/qun.png"/>
            </div>
            <div style="flex: 1;margin-left: 5px">
              <div style="height: 24px;font-size: 20px">
                {{item.userFriendInfo.nickname}}
                (<span style="color: #4accfb">{{item.userFriendInfo.email}}</span>)
              </div>
              <div style="height: 12px;font-size: 10px;color: #b6b6b6">
              </div>
            </div>
            <div @click="showRefuseReason(item)" style="background:#f2f2f2;height: 30px;line-height:30px;border-radius: 50px;padding: 2px 15px;font-size: 13px;color: #333333;margin-right: 5px;">
              对方拒绝
            </div>
          </div>
        </div>
      </div>
      <my-toast v-model="showToast" :toast-msg="toastMsg" :toast-time="toastTime"></my-toast>
      <!--同意or拒绝-->
      <my-dialog @clickMask="showDialog11=false" v-model="showDialog11">
        <div v-if="JSON.stringify(currentDialogItem)!='{}'" slot="content" style="background: white;margin: 0 auto;width: 95%;border-radius: 5px">
          <div style="display: flex;align-items:center;border-bottom:0.1px solid #f2f2f2;height: 50px;padding: 15px;box-sizing: border-box;margin: 10px">
            <div style="height: 36px;width: 36px">
              <img style="height: 100%;width: 100%;border-radius: 50%" src="../../assets/img/message/qun.png"/>
            </div>
            <div style="flex: 1;margin-left: 5px">
              <div style="height: 24px;font-size: 20px">
                {{currentDialogItem.userInfo.nickname}}
                (<span style="color: #4accfb">{{currentDialogItem.userInfo.email}}</span>)
              </div>
              <div style="height: 12px;font-size: 10px;color: #b6b6b6">
              </div>
            </div>
          </div>
          <div style="font-size: 15px;margin: 10px 15px;color: #828282;">验证信息:</div>
          <div style="padding: 10px 30px;background: white">{{currentDialogItem.verification_info}}</div>
          <div style="height: 40px;margin-top: 5px;background: #4accfb;padding-top: 5px;box-sizing: border-box">
            <div style="display:flex;color: #4accfb;background: white;width: 200px;height: 30px;padding: 1px;border-radius: 50px;margin: 0 auto">
              <div @click="changeActive(1)" :class="{noActive:currentActive!=1}" style="flex: 1;width: 100px;height: 30px;line-height:30px;text-align:center;border-radius: 50px 0 0 50px">
                同意
              </div>
              <div @click="changeActive(2)" :class="{noActive:currentActive!=2}" style="flex: 1;width: 100px;height: 30px;line-height:30px;text-align:center;border-radius: 0 50px 50px 0">
                拒绝
              </div>
            </div>
          </div>
          <div v-show="currentActive==1" style="height: 140px">
            <div style="font-size: 15px;margin: 10px 15px;color: #828282">设置备注和分组</div>
            <div style="background: white;padding:0 0 0 10px;box-sizing: border-box;border-top:0.1px solid #f2f2f2;">
              <div style="display: flex;align-items: center;height: 50px;padding: 10px;box-sizing: border-box">
                <div style="height: 30px;line-height:30px;text-align:center;width: 80px;text-align: center">备注：</div>
                <div style="flex: 1;height: 30px">
                  <input v-model="remark" placeholder="请输入备注"  style="height: 30px;width: 100%;outline: 0;border: 0;font-size: 20px"/>
                </div>
              </div>
              <div style="display: flex;align-items: center;height: 50px;padding: 10px;box-sizing: border-box;border-top: 0.1px solid #f2f2f2">
                <div style="height: 30px;line-height:30px;text-align:center;width: 80px;text-align: center">分组：</div>
                <div @click="selectUserGroup()" class="addJiantouStyle" style="flex: 1;height: 30px;line-height: 30px">
                  {{currentSelectedGroup.group_name}}
                </div>
              </div>
            </div>
          </div>
          <div v-show="currentActive==2" style="height: 140px">
            <div style="font-size: 15px;margin: 10px 15px;color: #828282">设置拒绝理由</div>
            <textarea v-model="reason" placeholder="请输入拒绝理由" style="height:100px;width: 100%;outline: 0;border: 0;box-sizing: border-box;font-size: 20px;border-top:0.1px solid #f2f2f2;"></textarea>
          </div>
          <div @click="confirmResult()" style="height: 50px;line-height: 50px;text-align: center;border-top: 0.1px solid #f2f2f2">
            确定
          </div>
        </div>
      </my-dialog>
      <!--选择分组弹框-->
      <my-dialog v-model="showDialog">
        <div slot="content" style="background: white;margin: 0 auto;width: 95%;border-radius: 5px">
          <my-header title="选择分组">
            <img @click="showDialog=false" src="../../assets/img/message/back_left.png" slot="imgLeft"/>
          </my-header>
          <div style="display: flex;align-items: center;height: 50px;padding: 10px 15px;border-bottom: 0.2px solid #f2f2f2">
            <div @click="showDialog2=true" style="width: 30px;height: 30px;border: 1px dashed #828282;padding: 5px;border-radius: 5px">
              <img style="width: 100%;height: 100%" src="../../assets/img/contacts/add_1.png"/>
            </div>
            <div style="margin-left: 10px">添加分组</div>
          </div>
          <div style="height: 60vh;overflow: scroll;">
            <div v-show="groupInfoRes.length==0" style="text-align: center">
              目前没有分组，请添加分组
            </div>
            <div @click="selectGroup(item)" v-for="(item,index) in groupInfoRes" style="display:flex;align-items:center;height: 50px;padding: 10px 15px;box-sizing: border-box;border-bottom: 0.2px solid #f2f2f2">
              <div>{{item.group_name}}</div>
              <div style="flex: 1"></div>
              <div style="height: 30px;width: 30px">
                <img v-show="currentSelectedGroup.id==item.id" style="width: 100%;height: 100%" src="../../assets/img/contacts/gou.png"/>
              </div>
            </div>
          </div>
        </div>
      </my-dialog>
      <!--添加分组弹框-->
      <my-dialog top="25%" @clickMask="showDialog2=false" v-model="showDialog2">
        <div slot="content" style="background: white;margin: 0 auto;width: 80%;border-radius: 5px">
          <div style="text-align: center;padding-top: 20px;font-size: 20px">添加分组</div>
          <div style="text-align: center;margin-top: 10px">请输入新的分组名称</div>
          <div style="padding: 0 15px;border-radius: 5px;margin-top: 10px;">
            <input v-model="groupName" placeholder="请输入分组名称" style="padding:0 5px;box-sizing: border-box;font-size:15px;height: 40px;width:100%;border: 0;outline: 0;background: #f2f2f2"/>
          </div>
          <div @click="addGroupName(groupName)" style="height: 40px;line-height: 40px;text-align: center;margin-top: 20px;border-top: 0.1px solid #f2f2f2">
            确定
          </div>
        </div>
      </my-dialog>
    </div>
</template>

<script>
  import {selectNewFriendPageData,selectUserGroupInfo,addUserGroupInfo} from '../../util/requestAll/addfriend'
  export default {
    name: "ApplyFromFriend",
    data(){
      return {
        newFriendData:{},//申请数据
        showToast:false,
        toastMsg:'',
        toastTime:2000,
        showDialog11:false,//同意，or拒绝
        currentDialogItem:{},
        currentActive:1,//拒绝2，同意1
        remark:'',//备注
        currentSelectedGroup:{
          id:-1,
          group_name:'点击选择分组'
        },//当前选择的组
        showDialog:false,//选择分组
        showDialog2:false,//添加分组
        groupInfoRes:[],//用户所有分组
        groupName:'',//输入框分组名称
        reason:'',//拒绝理由
      }
    },
    computed:{

    },
    methods:{
      showMyToast(toastMsg,toastTime){
        this.toastMsg=toastMsg
        this.toastTime=toastTime
        this.showToast=true
      },
      //查询所有申请记录
      setNewFriendData(){
        let _this=this
        let userId=this.$store.state.userInfo.id
        console.log(userId)
        selectNewFriendPageData({
          user_id:userId
        }).then(data=>{
          _this.newFriendData=data.data
        })
      },
      //同意添加好友
      agreeAddFriend(item){
        this.currentDialogItem=item
        this.showDialog11=true
      },
      //你拒绝
      showReason(item){
        this.showMyToast('你拒绝他的理由：'+item.reason,2000)
      },
      //对方拒绝
      showRefuseReason(item){
        this.showMyToast('对方拒绝理由：'+item.reason,2000)
      },
      changeActive(status){
        this.currentActive=status
      },
      selectUserGroup(){
        let userId=this.$store.state.userInfo.id
        let _this=this
        selectUserGroupInfo({
          user_id:userId
        }).then(data=>{
          let res=data.data
          _this.groupInfoRes=res
          _this.showDialog=true
        })
      },
      selectGroup(item){
        this.currentSelectedGroup=item
        this.showDialog=false
      },
      addGroupName(groupName){
        let _this=this
        if(groupName){
          let userId=this.$store.state.userInfo.id
          addUserGroupInfo({
            user_id:userId,
            group_name:groupName
          }).then(data=>{
            if(data.data.status>0){
              _this.selectUserGroup()
              _this.groupName=''
              _this.showDialog2=false
            }
          })
        }else{
          this.showMyToast('名称为空，小样！',2000)
        }
      },
      confirmResult(){
        this.showMyToast('提交成功：',2000)
        this.showDialog11=false
      }
    },
    created(){
      this.setNewFriendData()
    }
  }
</script>

<style scoped>
  .noActive{
    color: white;
    background: #4accfb;
  }
  /*后面的箭头----------------------------------------*/
  .addJiantouStyle{
    position: relative;
  }
  .addJiantouStyle:after{
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #C8C8CD;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 40%;
    right: 20px;
  }
  .addJingtouDownStyle:after{
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0) rotate(90deg);
  }
  /*后面的箭头----------------------------------------*/
</style>
